/* 学习目标：掌握Action创建函数的两种写法  */
// 1. 同步： Action创建函数，需要返回💥💥 对象
// 2. 异步： Action创建函数，需要返回💥💥 异步函数
//          返回的异步函数内，调用API
//          返回的异步函数形参中，获取dispatch， 重新发起dispatch

import { TodoAdd } from './actionTypes';

export const TodoAddAction = (task) => {
  return async (dispatch) => {
    const res = await loadNewTodoAPI();
    dispatch({ type: TodoAdd, payload: res });
  };
};

function loadNewTodoAPI() {
  const newTodo = {
    task: '异步返回的任务',
    id: Date.now(),
  };
  console.log('开始请求');
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('请求成功，2秒后,数据返回');
      resolve(newTodo);
    }, 2000);
  });
}

// 模拟-Redux-thunk实现原理
const myStore = {
  state: {},
  reducer(state, action) {
    // 接收到对象，同步更新state
    console.log('action  ----->  ', action);
  },
  dispatch: (action) => {
    // 💥💥
    if (typeof action === 'function') {
      action(myStore.dispatch);
      return;
    }
    myStore.reducer(myStore.state, action);
  },
};

myStore.dispatch({ type: 'add', payload: 'xxx' });

myStore.dispatch(async (dispatch) => {
  const res = await loadNewTodoAPI();
  dispatch({ type: 'add', payload: res });
});
